@baseSize:14px;
@baseBgColor:#fff;
@courseNavBgColor:#fff;
@activeColor:#27A4FE;
.flex(@justify:flex-start,@align:flex-start){
  display: flex;
  justify-content: @justify;
  align-items:@align
}
.btn{
  cursor: pointer;
}
.before(@fontSize:14px,@marginRight:10px){
  &::before {
    content: '|';
    font-size: @fontSize;
    width: 4px;
    height: 20px;
    margin-right: @marginRight;
    color: #27a4fe;
    background: #27a4fe;
  }
}
.chapter(){
  .chapter {
    .before(10px, 12px);
    padding: 15px 0;
    background: #f5f6f6;
    img{
      margin-top: 5px;
      margin-right: 10px;
    }
  }
}
.fl{
  float: left;
}
.fr{
  float: right;
}
.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}
.pagination{
  text-align: center;
  margin-top: 100px;
}
.course-nav-active {
  background-color: @activeColor;
  border-radius: 1px;
  color: rgba(254, 254, 254, 1);
}
.tab-active{
  color: #27A4FE;
  border-bottom: solid 1px #27A4FE;
}
.check-default{
  padding: 3px 12px;
  border: solid 1px #27A3FD;
  color: #27A3FD;
}
.check-active{
  background-color: #27A3FD;
  color: #FFFFFF;
}